<template>
	<view class="content">


		<!-- 用户信息 -->
		<view class="user-card">
			<view class="user-info">
				<image class="user-avatar" :src="avatarUrl" mode="aspectFill"></image>
				<view class="user-details">
					<view class="user-name">{{userInfo.userName || '未登录'}}</view>
					<view class="user-id" v-if="userInfo.userId">ID:{{userInfo.userId}}</view>
				</view>
				<view class="settings-icon" @click="handleMenuClick('settings')">
					<u-icon name="setting" size="24" color="#ffffff"></u-icon>
				</view>
			</view>
			<view class="user-balance">
				<view class="balance-label">可用余额</view>
				<view class="balance-amount">¥{{userBalance}}</view>
			</view>
		</view>

		<!-- 订单统计 -->
		<view class="order-stats">
			<view class="stat-item">
				<view class="stat-num">0</view>
				<view class="stat-label">收藏</view>
			</view>
			<view class="stat-item">
				<view class="stat-num">{{userBalance}}</view>
				<view class="stat-label">余额</view>
			</view>
			<view class="stat-item">
				<view class="stat-num">{{userIntegral}}</view>
				<view class="stat-label">积分</view>
			</view>
		</view>

		<!-- 订单管理 -->
		<view class="order-section">
			<view class="section-item">
				<u-icon name="file-text" color="#4CAF50" size="30"></u-icon>
				<text>全部订单</text>
			</view>
			<view class="section-item">
				<u-icon name="red-packet-fill" color="#4CAF50" size="30"></u-icon>
				<text>待付款</text>
			</view>
			<view class="section-item">
				<u-icon name="gift" color="#4CAF50" size="30"></u-icon>
				<text>待发货</text>
			</view>
			<view class="section-item">
				<u-icon name="car" color="#4CAF50" size="30"></u-icon>
				<text>待收货</text>
			</view>
			<view class="section-item">
				<u-icon name="checkmark-circle" color="#4CAF50" size="30"></u-icon>
				<text>已完成</text>
			</view>
		</view>

		<!-- 功能栏 -->
		<view class="feature-grid">
			<view class="feature-row">
				<view class="feature-item" @click="handleFeatureClick('adopt')">
					<view class="feature-icon">
						<u-icon name="car" color="#4CAF50" size="30"></u-icon>
					</view>
					<view class="feature-text">我的认养</view>
				</view>
				<view class="feature-item" @click="handleFeatureClick('land')">
					<view class="feature-icon">
						<u-icon name="map" color="#4CAF50" size="30"></u-icon>
					</view>
					<text>我的土地</text>
				</view>
				<view class="feature-item" @click="handleFeatureClick('activity')">
					<view class="feature-icon">
						<u-icon name="camera" color="#4CAF50" size="30"></u-icon>
					</view>
					<text>我的活动</text>
				</view>
				<view class="feature-item" @click="handleFeatureClick('purse')">
					<view class="feature-icon">
						<u-icon name="lock-fill" color="#4CAF50" size="30"></u-icon>
					</view>
					<text>我的钱包</text>
				</view>
			</view>
			<view class="feature-row">
				<view class="feature-item" @click="handleFeatureClick('distribution')">
					<view class="feature-icon">
						<u-icon name="rmb-circle" color="#4CAF50" size="30"></u-icon>
					</view>
					<text>分销中心</text>
				</view>
				<view class="feature-item" @click="handleFeatureClick('coupon')">
					<view class="feature-icon">
						<u-icon name="calendar" color="#4CAF50" size="30"></u-icon>
					</view>
					<text>我的优惠券</text>
				</view>
				<view class="feature-item" @click="handleFeatureClick('getCoupon')">
					<view class="feature-icon">
						<u-icon name="gift" color="#4CAF50" size="30"></u-icon>
					</view>
					<text>领优惠券</text>
				</view>
				<view class="feature-item" @click="toSignin()">
					<view class="feature-icon">
						<u-icon name="bookmark" color="#4CAF50" size="30"></u-icon>
					</view>
					<text>我的签到</text>
				</view>
			</view>


			<view class="feature-row">
				<view class="feature-item" @click="handleFeatureClick('message')">
					<view class="feature-icon">
						<u-icon name="coupon" color="#4CAF50" size="30"></u-icon>
					</view>
					<text>我的消息</text>
				</view>
				<view class="feature-item" @click="handleMenuClick('questions')">
					<view class="feature-icon">
						<u-icon name="question-circle" color="#4CAF50" size="30"></u-icon>
					</view>
					<text>常见问题</text>
				</view>
				<view class="feature-item" @click="handleFeatureClick('cart')">
					<view class="feature-icon">
						<u-icon name="shopping-cart" color="#4CAF50" size="30"></u-icon>
					</view>
					<text>购物车</text>
				</view>
				<view class="feature-item" @click="handleFeatureClick('feed')">
					<view class="feature-icon">
						<u-icon name="share-square" color="#4CAF50" size="30"></u-icon>
					</view>
					<text>远程喂养饲料购买</text>
				</view>
			</view>
		</view>

		<!-- 其他菜单 -->
		<view class="other-menu">
			<view class="menu-item" @click="handleMenuClick('AiIndex')">
				<u-icon name="chat" color="#A7A7A7" size="20"></u-icon>
				<view class="menu-text">智能客服</view>
				<u-icon name="arrow-right" color="#C8C8C8" size="20"></u-icon>
			</view>
			<view class="menu-item" @click="handleMenuClick('address')">
				<u-icon name="map" color="#A7A7A7" size="20"></u-icon>
				<view class="menu-text">地址管理</view>
				<u-icon name="arrow-right" color="#C8C8C8" size="20"></u-icon>
			</view>
			<view class="menu-item" @click="handleMenuClick('about')">
				<u-icon name="info-circle" color="#A7A7A7" size="20"></u-icon>
				<view class="menu-text">关于我们</view>
				<u-icon name="arrow-right" color="#C8C8C8" size="20"></u-icon>
			</view>
			<view class="menu-item" @click="handleMenuClick('settings')">
				<u-icon name="setting" color="#A7A7A7" size="20"></u-icon>
				<view class="menu-text">账号设置</view>
				<u-icon name="arrow-right" color="#C8C8C8" size="20"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	// 导入所需组件和工具
	import uIcon from "uview-ui/components/u-icon/u-icon.vue"
	import uPopup from "uview-ui/components/u-popup/u-popup.vue"
	import request from '@/util/request.js'

	export default {
		components: {
			uIcon,
			uPopup
		},
		data() {
			return {
				userInfo: {
					userId: '',
					userAcc: '',
					userName: ''
				},
				userBalance: '0.00',
				userIntegral: '0',
				token: '',
				avatarUrl: 'http://121.36.197.175:19000/test/user-avatar.png',
				baseUrl: 'http://121.36.197.175:19000/test/'
			}
		},
		onLoad() {
			this.getUserInfo();
			this.token = uni.getStorageSync('token') || '';
			this.getUserBalance();
			this.getUserIntegral();
		},
		onShow() {
			this.token = uni.getStorageSync('token') || '';
			this.getUserInfo();
			this.getUserAvatar();
		},
		methods: {
			toSignin(){
				uni.navigateTo({
				  url: `/pages/signin/signin`
				});
			},
			// 获取用户头像
			async getUserAvatar() {
				try {
					if (!this.userInfo.userId) {
						return;
					}
					
					// 先检查本地存储中是否有头像信息
					const userInfo = uni.getStorageSync('userInfo');
					if (userInfo && userInfo.avatar) {
						this.avatarUrl = this.baseUrl + userInfo.avatar;
						return;
					}
					
					// 如果本地没有，则从服务器获取
					const res = await request({
						url: '/user-service/user/avatar',
						method: 'GET',
						data: {
							userId: this.userInfo.userId
						}
					});
					
					if (res.code === 200 && res.data.avatarUrl) {
						// 拼接完整的头像URL
						this.avatarUrl = this.baseUrl + res.data.avatarUrl;
						
						// 更新本地存储
						const userInfo = uni.getStorageSync('userInfo') || {};
						userInfo.avatar = res.data.avatarUrl;
						uni.setStorageSync('userInfo', userInfo);
					}
				} catch (error) {
					console.error('获取头像失败', error);
				}
			},
			// 获取用户信息
			getUserInfo() {
				try {
					const userInfo = uni.getStorageSync('userInfo');
					if (userInfo) {
						this.userInfo.userId = userInfo.userId;
						this.userInfo.userAcc = userInfo.userAcc;
						this.userInfo.userName = userInfo.userName;
						
						// 如果有头像信息，则更新头像URL
						if (userInfo.avatar) {
							this.avatarUrl = this.baseUrl + userInfo.avatar;
						}
					} else {
						// 未登录处理
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}
				} catch (e) {
					console.error('获取用户信息失败', e);
				}
			},
			// 处理订单点击
			handleOrderClick(type) {
				switch (type) {
					case 'all':
						uni.navigateTo({
							url: '/pages/my/allOrders'
						});
						break;
					case 'unpaid':
						uni.navigateTo({
							url: '/pages/my/unpaidOrders'
						});
						break;
					default:
						uni.showToast({
							title: '功能开发中',
							icon: 'none'
						});
				}
			},
			
			// 处理功能点击
			handleFeatureClick(type) {
				switch (type) {
					case 'adopt':
						uni.navigateTo({
							url: '/pages/farm/myAdopt'
						});
						break;
					case 'land':
						uni.navigateTo({
							url: '/pages/farm/myField/myField'
						});
						break;
					case 'activity':
						uni.navigateTo({
							url: '/pages/activity/activity'
						});
						break;
					case 'cart':
						uni.navigateTo({
							url: '/pages/shop/cart'
						});
						break;
					case 'purse':
						uni.navigateTo({
							url: '/pages/my/purse'
						});
						break;	
						
						
					default:
						uni.showToast({
							title: '功能开发中',
							icon: 'none'
						});
				}
			},
			// 处理菜单点击
			handleMenuClick(type) {
				switch (type) {
					case 'AiIndex':
						uni.navigateTo({
							url: '/pages/Intelligent/AiIndex'
						});
						break;
					case 'address':
						uni.navigateTo({
							url: '/pages/address/address'
						});
						break;
					case 'about':
						uni.navigateTo({
							url: '/pages/my/about'
						});
						break;
					case 'settings':
						uni.navigateTo({
							url: '/pages/my/accSettings'
						});
						break;
					case 'questions':
						uni.navigateTo({
							url: '/pages/my/questions'
						});
						break;
				}
			},

			// 获取用户余额
			async getUserBalance() {
				try {
					const res = await request({
						url: '/user-service/user/balance',
						method: 'GET',
						data: {
							userId: this.userInfo.userId
						}
					});

					// 获取余额成功
					const balance = res.data.balance || 0;
					this.userBalance = balance.toFixed(2);
					const integral = res.data.integral || 0;
					this.userIntegral = integral;
				} catch (error) {
					console.error('获取余额失败', error);
					if (error.code === 401) {
						// token失效，跳转登录页
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}
				}
			},
			//获取积分
			
			async getUserIntegral(){
				try {
					const res = await request({
						url: '/user-service/user/integral',
						method: 'GET',
						data: {
							userId: this.userInfo.userId
						}
					});
				
					// 获取积分
					const integral = res.data.integral || 0;
					this.userIntegral = integral;
				} catch (error) {
					console.error('获取积分失败', error);
					if (error.code === 401) {
						// token失效，跳转登录页
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}
				}
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
		background-color: #f5f5f5;
	}

	.header {
		background-color: #4CAF50;
		padding: 20rpx 30rpx;
		position: relative;
	}

	.title {
		color: #ffffff;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
	}

	/* 用户信息卡片 */
	.user-card {
		background-color: #4CAF50;
		color: #ffffff;
		padding: 20rpx 30rpx 30rpx;
	}

	.user-info {
		display: flex;
		align-items: center;
		position: relative;
	}

	.user-avatar {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		border: 4rpx solid rgba(255, 255, 255, 0.6);
	}

	.user-details {
		margin-left: 20rpx;
	}

	.user-name {
		font-size: 34rpx;
		font-weight: bold;
		margin-bottom: 6rpx;
	}

	.user-vip {
		background-color: #FFC107;
		color: #ffffff;
		font-size: 20rpx;
		padding: 2rpx 10rpx;
		border-radius: 20rpx;
		margin-left: 10rpx;
		font-weight: normal;
		vertical-align: middle;
	}

	.user-id {
		font-size: 26rpx;
		opacity: 0.8;
	}

	.settings-icon {
		position: absolute;
		right: 0;
		top: 10rpx;
	}

	.user-balance {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
	}

	.balance-label {
		font-size: 30rpx;
	}

	.balance-amount {
		font-size: 34rpx;
		font-weight: bold;
		margin-left: 20rpx;
		flex: 1;
	}

	/* 订单统计 */
	.order-stats {
		display: flex;
		background-color: #ffffff;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.stat-item {
		flex: 1;
		text-align: center;
	}

	.stat-num {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}

	.stat-label {
		font-size: 28rpx;
		color: #999;
	}

	/* 订单管理 */
	.order-section {
		display: flex;
		background-color: #ffffff;
		padding: 30rpx 0;
		margin-bottom: 20rpx;
	}

	.section-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.section-item text {
		font-size: 26rpx;
		color: #666;
		margin-top: 10rpx;
	}

	.feature-text {
		font-size: 26rpx;
		color: #666;
	}

	/* 功能栏 */
	.feature-grid {
		background-color: #ffffff;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
	}

	.feature-row {
		display: flex;
		padding: 20rpx 0;
	}

	.feature-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.feature-icon {
		margin-bottom: 10rpx;
	}

	.feature-item text {
		font-size: 26rpx;
		color: #666;
	}

	/* 其他菜单 */
	.other-menu {
		background-color: #ffffff;
	}

	.menu-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.menu-text {
		flex: 1;
		margin-left: 20rpx;
		font-size: 30rpx;
		color: #333;
	}
</style>
